<template>
  <div class="not-finish">
    <head-top head-title="接单订单" go-back="true"></head-top>
    <div class="not-finish-main">
      <ul>
        <li v-for="(n,index) in notList" :key="index">
          <div class="order-number">
            <span>订单号：{{n.order_id}}</span>
            <span>未完全</span>
          </div>
          <div class="order-content" @click="$router.push('/my/OrderDetails/'+n.order_id)">
            <h2>{{n.title}}</h2>
            <p>截止时间：{{n.end_at}}</p>
            <p>查验地址：{{n.address}}</p>
          </div>
          <div class="order-btn">
            <button v-on:click="phoneCall(n.phone)">与他联系</button>
            <button v-if="n.status===3" @click="okBtn(n.order_id)">确认完成</button>
            <button class="wait-btn" v-if="n.status===4">等待确认完成</button>
          </div>
        </li>
        <!--<li>
          <div class="order-number">
            <span>订单号：201904291322</span>
            <span>未完全</span>
          </div>
          <div class="order-content">
            <h2>云耐家园小区电梯查验</h2>
            <p>截止时间：2019.5.4</p>
            <p>查验地址：杭州是下城区白石巷318号</p>
          </div>
          <div class="order-btn">
            <button>与他联系</button>
            &lt;!&ndash;点击完成后按钮变成&ndash;&gt;
            <button class="wait-btn">等待确认完成</button>
          </div>
        </li>-->
        <li v-if="flag&&notList.length === 0" class="no_data">
          <img src="../../../assets/default.png" alt="" width="100" height="100">
          <p>抱歉！暂无数据</p>
        </li>
        <li v-if="noDataShow" class="no_data">
          <img src="../../../assets/default.png" alt="" width="100" height="100">
          <p>抱歉！暂无数据</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import headTop from '../../../components/header/Header'
  import { notFinishList, okFinish } from '../../../api/MyOrder'
  import { Toast } from 'mint-ui'

  export default {
    name: 'NotFinish',
    data () {
      return {
        types: 'person',
        t_status: 3,
        notList: [],
        okStatus: 4,
        waitBtn: false,
        flag: false, // 标识：用于判断没有数据的时候的显示
        noDataShow: false // 用于code为400的时候显示
      }
    },
    // 设置缓存从哪个页面回来（停留在点击进入详情页时的位置）
    beforeRouteEnter: (to, from, next) => {
      if (from.name === 'OrderDetails') {
        to.meta.isBack = true
      }
      next()
    },
    activated () {
      if (!this.$route.meta.isBack) {
        this._notFinishList()
      }
      this.$route.meta.isBack = false
    },
    created () {
      this._notFinishList()
    },
    methods: {
      _notFinishList () {
        notFinishList(this.types, this.t_status).then(res => {
          // console.log(res)
          if (res.code === 200) {
            // reverse:颠倒数组元素的顺序
            this.notList = res.data.reverse()
            this.flag = true
            // console.log(this.notList)
          }
          if (res.code === 400) {
            this.noDataShow = true
          }
        })
      },
      // 与他联系拨打电话
      phoneCall: function (msg) {
        // console.log(msg)
        window.location.href = `tel://${msg}`
      },
      // 确认完成
      okBtn (id) {
        okFinish(id, this.okStatus).then(res => {
          // console.log(res)
          if (res.code === 200) {
            Toast({
              message: res.data,
              position: 'middle',
              duration: 1000
            })
            this._notFinishList()
          }
        })
      }
    },
    components: {
      headTop
    }
  }
</script>

<style lang="scss" scoped>
  .not-finish {
    padding-top: 50px;
    .not-finish-main {
      ul {
        li {
          border-bottom: 10px solid #f2f2f2;
          padding: 10px;
          .order-number {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            border-bottom: 1px solid #d9d9d9;
            padding: 2px 0 7px 0;
            span:first-child {
              color: #666666;
            }
            span:last-child {
              color: #2585d0;
            }
          }
          .order-content {
            h2 {
              font-size: 15px;
              padding-top: 10px;
              font-weight: normal;
              color: #292929;
            }
            p {
              font-size: 14px;
              color: #666666;
              padding-top: 10px;
            }
          }
          .order-btn {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            align-items: center;
            justify-content: space-between;
            button {
              width: 45%;
              padding: 10px;
              margin-top: 10px;
              outline: none;
              border: 1px solid #bfbfbf;
              border-radius: 5px;
              color: #292929;
              background: #ffffff;
              font-size: 14px;
            }
            .wait-btn {
              width: 45%;
              padding: 10px;
              margin-top: 10px;
              outline: none;
              border: 1px solid #2585d0;
              border-radius: 5px;
              color: #2585d0;
              background: #ffffff;
              font-size: 14px;
            }
          }
        }
        li:last-child {
          border-bottom: none;
        }
        .no_data {
          width: 100%;
          text-align: center;
          color: #0b7ad9;
          font-size: 14px;
          img {
            padding-top: 20px;
          }
          p {
            margin-top: 5px;
          }
        }
      }
    }
  }
</style>
